<!-- 意见反馈 -->
<template>
  <div class="feedback">
    <!-- 顶部导航 -->
    <van-nav-bar
      title="意见反馈"
      left-arrow
      @click-left="onClickLeft"
      fixed
      placeholder
      safe-area-inset-top
    />

    <!-- 反馈表单 -->
    <div class="form-container">
      <div class="form-item">
        <van-field
          v-model="params.content"
          type="textarea"
          placeholder="某个功能无法使用、页面白屏/卡顿/闪退、或其他产品建议(10个字以上)，建议上传截图"
          rows="5"
          maxlength="400"
          show-word-limit
        />
      </div>

      <div class="form-item padding">
        <div class="label"><span>图片</span><span class="upload-tips">(最多上传5张图片)</span></div>
        <van-uploader
          v-model="fileList"
          :max-count="5"
          :multiple="true"
          :after-read="afterRead"
          @delete="onDelete"
        />
      </div>
    </div>

    <!-- 提交按钮 -->
    <div class="submit-btn">
      <van-button color="#32BC05" type="primary" block round @click="onSubmit">确定</van-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import bridge from '@/utils/bridge.js'
import { addFeedback, upload } from '@/api'
import { ref } from 'vue'
import { showToast } from 'vant'

// 表单数据
const params = ref({
  content: '',
  ossId: ''
})
const fileList = ref([])

// 图片上传后的处理
const afterRead = async (file: any, index: any) => {
  let data = new FormData()
  if (file.file) {
    file.status = 'uploading'
    file.message = '上传中...'
    data.append('files', file.file)
  } else {
    file.map((item: any) => {
      item.status = 'uploading'
      item.message = '上传中...'
      data.append('files', item.file)
    })
  }
  let res = await upload(data)
  if (res.code === 200) {
    if (file.file) {
      file.status = 'done'
      file.message = '上传成功'
    } else {
      file.map((item: any) => {
        item.status = 'done'
        item.message = '上传成功'
      })
    }

    res.data.map((item: any) => {
      if (params.value.ossId) {
        params.value.ossId = `${params.value.ossId},${item.ossId}`
      } else {
        params.value.ossId = `${item.ossId}`
      }
    })
    console.log(params.value)
  }
}

// 删除图片
const onDelete = (file: any, detail: any) => {
  let arr = params.value.ossId.split(',')
  arr.splice(detail.index, 1)
  params.value.ossId = arr.join(',')
}

// 提交反馈
const onSubmit = async () => {
  if (!params.value.content) {
    showToast('请输入反馈内容')
    return
  } else if (!params.value.ossId) {
    showToast('请上传图片')
    return
  }
  let res = await addFeedback(params.value)
  if (res.code === 200) {
    showToast('提交成功')
    bridge.closeWebView()
  }
}

const onClickLeft = () => {
  bridge.closeWebView()
}

onMounted(() => {
  bridge.setNavigationBarVisible({
    value: '0'
  })
})
</script>

<style lang="scss" scoped>
.feedback {
  height: 100vh;
  background: #f5f5f5;
  overflow: hidden;

  :deep(.van-nav-bar) {
    background: #fff;
    height: 44px;

    &::after {
      border: none;
    }

    .van-nav-bar__title {
      color: #222;
      font-weight: 400;
    }

    .van-icon {
      color: #222;
    }
  }

  .form-container {
    overflow: hidden;

    .form-item {
      margin: 10px 12px;
      font-size: 14px;
      background: #fff;
      border-radius: 10px;
      overflow: hidden;
      height: 220px;

      .label {
        color: #222;
        margin-bottom: 12px;
      }

      .van-cell {
        font-size: 14px;
      }

      .type-list {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;

        .type-item {
          padding: 8px 16px;
          background: #f7f8fa;
          border-radius: 4px;
          font-size: 14px;
          color: #666;
          cursor: pointer;

          &.active {
            background: #32bc05;
            color: #fff;
          }
        }
      }

      .upload-tips {
        font-size: 14px;
        color: #999;
      }

      :deep(.van-uploader) {
        .van-uploader__wrapper {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
        }

        .van-uploader__upload {
          width: 74px;
          height: 74px;
          margin: 0;
          background: #f7f8fa;
          border: 1px dashed #dcdee0;
        }

        .van-uploader__preview {
          width: 74px;
          height: 74px;
          margin: 0;
        }
        .van-uploader__preview-image {
          width: 74px;
          height: 74px;
        }
      }

      &.padding {
        padding: 10px;
      }
    }
  }

  .submit-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
  }
}
</style>
